<template>
   <div class="box">
    <div class="search">
        <input type="text" placeholder="Search..." class="inp" :class="show ? 'active' : ''">
        <i class="iconfont icon-sousuo icon" @click="change"></i>
    </div>
   </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
const change = () =>{
    show.value = !show.value
    if(show.value == false){
        const inp = document.querySelector('.inp')
        inp.focus()
    }
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
    background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search {
    display: flex;
    width: 200px;
    height: 45px;
    border-radius: 4px;
    box-sizing: border-box;
}

.inp {
    font-size: 16px;
    width: 200px;
    border: 0;
    outline: 0;
    padding-left: 10px;
    transition: all linear .3s;
}

.active {
    width: 0;
}

.icon {
    font-size: 22px;
    background-color: #fff;
    line-height: 45px;
    padding-right: 10px;
}
</style>